<template>
  <el-scrollbar>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff" router :collapse="boole">
      <el-menu-item-group>
        <el-menu-item :index="'/index/'+item.name" v-for="(item,index) in meuList.slice(0,1)" :key="index">
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <template #title><span>{{$t(item.meta.title)}}</span></template>
        </el-menu-item>
      </el-menu-item-group>
      <el-sub-menu :index="'/index/'+item.path" v-for="(item,index) in meuList.slice(1)" :key="index">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{$t(item.meta.title)}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="'/index/'+item.path+'/'+items.path" v-for="(items,index) in item.children" :key="index" v-show="!items.meta.hide">{{$t(items.meta.title)}}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>

<script>
import { Histogram, ShoppingCart, Management, Setting, User, HomeFilled } from '@element-plus/icons-vue';
export default {
  props: ['meuList', 'boole'],
  components: {
    Histogram,
    ShoppingCart,
    Management,
    Setting,
    User,
    HomeFilled,
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}
</style>
